<template>
    <div class="login-register">
      <el-card class="login-card">
        <h2 class="login-title">注册</h2>
        <el-form :model="registerData" @submit.prevent="register" class="login-form">
          <el-form-item label="姓名:" label-width="70px">
            <el-input v-model="registerData.name" required></el-input>
          </el-form-item>
          <el-form-item label="账号:" label-width="70px">
            <el-input v-model="registerData.account" required></el-input>
          </el-form-item>
          <el-form-item label="密码:" label-width="70px">
            <el-input type="password" v-model="registerData.password" required></el-input>
          </el-form-item>
          <el-form-item label="性别:" label-width="70px">
            <el-radio-group v-model="registerData.gender">
              <el-radio label="male">男</el-radio>
              <el-radio label="female">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item class="button-container">
            <el-button type="primary" native-type="submit" class="login-button">{{ registerButtonText }}</el-button>
          </el-form-item>
          <el-form-item class="button-container">
            <el-button type="text" @click="goBack" class="register-button">返回登录</el-button>
          </el-form-item>
        </el-form>
        <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
      </el-card>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import axios from 'axios';
  import { useRouter } from 'vue-router';
  
  export default {
    name: 'RegisterStu',
    setup() {
      const registerData = ref({
        teacher_id: '',
        name: '',
        account: '',
        password: '',
        gender: 'male', // 默认选项为男性
      });
      const router = useRouter();
      const errorMessage = ref('');
      const registerButtonText = ref('注册');
  
      const register = () => {
        axios.post('http://localhost:8080/Login/register/student', registerData.value)
          .then(response => {
            console.log(response.data);
            // 处理注册成功的情况
            console.log('注册成功！');
            registerButtonText.value = '已注册';
            router.push({ path: '/login' });
          })
          .catch(error => {
            console.error(error);
            // 处理注册失败的情况
            errorMessage.value = '注册失败，请重试';
          });
      };
  
      const goBack = () => {
        router.push({ path: '/Login' });
      };
  
      return {
        registerData,
        errorMessage,
        registerButtonText,
        register,
        goBack,
      };
    },
  };
  </script>
  
  <style scoped>
  .login-register {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url('@/assets/login.jpg'); /* 替换为实际的背景图片路径 */
    background-size: cover;
    background-position: center;
  }
  
  .login-card {
    width: 400px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  .login-title {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .login-form {
    width: 100%;
  }
  
  .button-container {
    display: flex;
    justify-content: center;
  }
  
  .login-button, .register-button {
    width: 360px;
  }
  
  .login-button {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
  }
  
  .register-button {
    background-color: #67c23a;
    border-color: #67c23a;
    color: #fff;
  }
  
  .error-message {
    color: red;
  }
  </style>
  